<template>
	<view class="container">
		<view class="chart-container">
			<qiun-data-charts type="column" :chartData="chartData" :opts="chartOptions" :canvas2d="true" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 在 setup 或 data 中修改为多系列数据
				chartData: {
					categories: ["1月", "2月", "3月", "4月", "5月", "6月"],
					series: [{
							name: "产品A",
							data: [35, 20, 25, 37, 4, 20]
						},
						{
							name: "产品B",
							data: [15, 30, 12, 27, 14, 30]
						}
					]
				},
				chartOptions: {
					color: ["#1890FF", "#F04864"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLine: true,
						fontSize: 12
					},
					yAxis: {
						data: [{
							min: 0,
							max: 40
						}]
					},
					// 修改 extra.column.type 为 stack
					extra: {
					  column: {
						type: "stack", // 改为堆叠模式
						width: 30
					  }
					}
				}
			};
		}
	};
</script>

<style>
	.chart-container {
		width: 100%;
		height: 300px;
		padding: 10px;
		box-sizing: border-box;
	}
</style>